<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>{{ isOverFlow ? '发起报溢单' : '发起报亏单' }}</span>
    </div>
    <el-row :gutter="15">
      <el-col :span="24">
        <el-form :model="search" :rules="rules" ref="elFormSearch">
          <el-row :gutter="15">
            <el-col :span="6" :offset="14">
              <el-form-item prop="warehouseId" class="pull-right">
                <el-select v-model="search.warehouseId" :disabled="!!model.tableData.length" placeholder="请选择仓库">
                  <el-option v-for="item of warehouseList" :label="item.text" :value="item.value"
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button class="pull-right" type="primary" @click="choicePackage">选择包件</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-form class="el-form-col" :model="model" :rules="rules" label-position="left" ref="elForm">
          <el-table
            :data="model.tableData"
            stripe
            style="width: 100%"
            height="600"
          >
            <el-table-column
              label="序号"
              type="index"
              width="55">
            </el-table-column>
            <el-table-column
              prop="cargoOwnerName"
              label="商家名称">
            </el-table-column>
            <el-table-column
              prop="locationName"
              label="所在库位">
            </el-table-column>
            <el-table-column
              prop="productName"
              label="所在产品">
            </el-table-column>
            <el-table-column
              prop="packageName"
              label="包件名称">
            </el-table-column>
            <el-table-column
              prop="locationAvailableNum"
              label="在库包件数量">
            </el-table-column>
            <el-table-column v-if="isOverFlow"
                             label="报溢包件数量">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.gainorlossNum'"
                              :rules="[{required: true, message: '报溢包件数量必填!', trigger: 'blur'},
                                  {validator: isInteger, message: '请输入正整数!', trigger: 'blur'},
                                  {validator: range, min: 0, message: '请输入正整数!', trigger: 'blur'}
                                  ]">
                  <el-input style="width: 90%" v-model="scope.row.gainorlossNum"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="!isOverFlow"
                             label="报亏包件数量">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.gainorlossNum'"
                              :rules="[{required: true, message: '报亏包件数量必填!', trigger: 'blur'},
                                  {validator: isInteger, message: '请输入正整数!', trigger: 'blur'},
                                  {validator: range, min: 0, message: '请输入正整数!', trigger: 'blur'},
                                  {validator: range, max: scope.row.locationAvailableNum, message: '不能大于在库包件数量!', trigger: 'blur'}
                                  ]">
                  <el-input style="width: 90%" v-model="scope.row.gainorlossNum"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="责任人">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.responsiblePerson'"
                              :rules="[{required: true, message: '责任人必填!', trigger: 'change'}]"
                >
                  <el-select filterable style="width: 90%" v-model="scope.row.responsiblePerson" placeholder="可搜索查询">
                    <el-option v-for="item of accountArr" :label="item.text" :value="item.value"
                               :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              :label="isOverFlow ? '报溢备注' : '报亏备注'">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.gainorlossMemo'"
                              :rules="[{max: 50, message: '最多只能输入50个字符!', trigger: 'blur'}
                                  ]">
                  <el-input style="width: 90%" v-model="scope.row.gainorlossMemo"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="del(scope.$index, scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" style="text-align: center;margin-top: 20px">
        <el-button type="primary" :loading="loading" @click="submit">提 交</el-button>
      </el-col>
    </el-row>
    <PackageSelectModal ref="PackageSelectModal"
                        :warehouseId="search.warehouseId"
                        @addPackage="addPackage"
                        :visible.sync="innerVisible"
    >
    </PackageSelectModal>
  </el-card>
</template>

<script>
import {unixTimestampFilter} from '@/filters'
import {copy} from '@/utils'
import PackageSelectModal from '@/views/oms/warehouse/lossReport/PackageSelectModal'
import {range, isInteger} from '@/utils/validate'
import {getAccounts, getWarehouse} from '@/utils/selectOptions'

export default {
  name: 'warehouseOverflow',
  components: {
    PackageSelectModal
  },
  filters: {
    unixTimestampFilter
  },
  data() {
    return {
      innerVisible: false,
      serviceCode: '',
      loading: false,
      model: {
        tableData: []
      },
      search: {
        warehouseId: ''
      },
      tableMap: new Map(),
      warehouseList: [],
      accountArr: [],
      rules: {
        warehouseId: [
          {required: true, message: '请选择仓库!', trigger: 'change'}
        ]
      }
    }
  },
  created() {
    getAccounts().then(arr => {
      this.accountArr = arr || []
    })
    getWarehouse().then(arr => {
      this.warehouseList = arr || []
    })
  },
  computed: {
    isOverFlow() {
      if (this.$route.name === 'warehouseOverflow') { // 是否是发起报溢界面
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    range,
    isInteger,
    choicePackage() {
      this.$refs.elFormSearch.validate(res => {
        if (!res) {
          return
        }
        this.innerVisible = true
      })
    },
    addPackage(data) {
      let dataArr = copy(data, true)
      let arr = []
      dataArr.forEach(item => {
        if (!this.tableMap.has(item.locationPackageId)) {
          arr.push(item)
          this.tableMap.set(item.locationPackageId, item)
        }
      })
      this.model.tableData = this.model.tableData.concat(arr)
    },
    del(index, data) {
      this.tableMap.delete(data.locationPackageId)
      this.model.tableData.splice(index, 1)
    },
    submit() {
      this.$refs.elForm.validate(res => {
        if (!res) {
          return
        }
        let data = copy(this.model.tableData, true)
        let obj = {
          locationPackageBean: []
        }
        data.forEach(item => {
          obj.locationPackageBean.push({
            gainorlossNum: item.gainorlossNum,
            responsiblePerson: item.responsiblePerson,
            gainorlossMemo: item.gainorlossMemo,
            locationPackageId: item.locationPackageId
          })
        })
        if (this.isOverFlow) { // 1报溢，2报亏
          obj.gainorlossState = '1'
        } else {
          obj.gainorlossState = '2'
        }
        obj.warehouseId = this.search.warehouseId
        this.loading = true
        this.$ajax.post('/ms-warehouse-order/inventory/saveGainOrLossItem', obj).then(reponse => {
          if (reponse.success) {
            this.model.tableData = []
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          }
          this.loading = false
        }).catch(_ => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0px;
  }
</style>
